<template>
   <div class="page-head">
       <div class="page-title">
            <div class="page-tab display-inline"></div>
           <div class="page-title-name display-inline">
             <div v-html="pageHead.pageTitle"></div>
           </div>
           <div class="page-log">
             <img src="../../assets/images/page-log.png" alt="">
           </div>
       </div>
       <div class="detail-title" v-if="pageHead.detailTitle">{{pageHead.detailTitle}}</div>
   </div>
</template>

<script>
  export default {
    name: 'pageHead',
    props:['pageHead'],
    data() {
      return {}
    },
    created() {
    },
    mounted() {
    },
    methods: {},
    components: {}
  }
</script>

<style lang="scss">
    .page-head{
        .page-title {
            padding: 46px 60px 62px 60px;
            font-size: 24px;
            .display-inline {
                display: inline-block;
                vertical-align: middle;
            }
            .page-tab{
                /*padding: 5px 20px;*/
                width: 9px;
                height: 21px;
                /*border-top-right-radius:5px;*/
                /*border-bottom-right-radius:5px;*/
                border-radius: 9px;
                text-align: right;
                background: #286b8e;
                color: #F7F8F8;
            }
            .page-title-name {
                color: #286b8e;
                margin-left: 20px;
                font-weight: bold;
                .en_title {
                  font-weight: 400;
                }
            }
          .page-log {
            width: 94px;
            float: right;
            img {
              max-width: 100%;
            }
          }
        }
        .detail-title {
            color: #0A122D;
            font-weight: bold;
            padding: 0 35px;
            font-size: 16px;
        }
    }
</style>
